<template>
  <view>
    <view class="top-bar">
      <view class="top-bar-box">
        <view class="top-bar-item" @click="openSelect = !openSelect"
          >{{ selectText }}
          <image class="icon" :src="require('@/static/xiala1.png')" />
        </view>
        <view class="top-bar-item" @click="$refs.calendar.open()"
          >{{ dateText }}
          <image class="icon" :src="require('@/static/xiala1.png')" />
          <!-- <image
            style="padding-top: 2px; margin-left: 10rpx"
            class="w24 h24"
            src="../../static/icon_right.png"
          /> --></view
        >
      </view>
      <view class="select-box" v-if="openSelect">
        <view
          @click="handleSubItem(v)"
          class="select-item"
          v-for="(v, i) in prList"
          :key="i"
        >
          <text
            :class="
              selectText === `${v.travelAgencyName} - ${v.name}` &&
              'active-color'
            "
            >{{ `${v.travelAgencyName} - ${v.name}` }}</text
          >
        </view>
      </view>
    </view>
    <view class="list-cnotent">
      <view class="app-card" v-for="(item, index) in dataList" :key="index">
        <view class="card-title">{{ prInfo.orgName }}</view>
        <view class="card-item">
          <text class="label">已核销订单金额</text>
          <text class="value">{{ item.destroyFee }}</text>
        </view>
        <view class="card-item">
          <text class="label">未核销订单金额</text>
          <text class="value">{{ item.notDestroyFee }}</text>
        </view>
        <view class="card-item">
          <text class="label">已分账总金额</text>
          <text class="value">{{ item.ratioFee }}</text>
        </view>
        <view class="card-item">
          <text class="label">总金额</text>
          <text class="value">{{ item.totalFee }}</text>
        </view>
      </view>
    </view>
    <wu-calendar
      :date="defaultRange"
      mode="range"
      :showMonth="false"
      ref="calendar"
      @confirm="calendarConfirm"
      :insert="false"
    ></wu-calendar>
  </view>
</template>

<script>
import { getOrgListByMobile, staffOrderStatistics } from "../../api/user";
import { dayjs } from "@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min.js";
export default {
  data() {
    return {
      openSelect: false,
      selectText: "",
      dateText: "",
      prList: [],
      travelStaffId: "",
      defaultRange: [],
      dataList: [],
      prInfo: {},
    };
  },
  created() {
    this.getPrList();
    this.defaultRange = [
      dayjs().subtract(7, "day").format("YYYY-MM-DD"),
      dayjs().format("YYYY-MM-DD"),
    ];
    this.dateText = `${this.defaultRange[0]}-${this.defaultRange[1]}`;
  },
  methods: {
    async getPrList() {
      let userInfo = uni.getStorageSync("userInfo") || {};
      const { body } = await getOrgListByMobile({
        mobile: userInfo.phone || "",
      });
      this.prList = body;
      this.selectText = `${body[0].travelAgencyName} - ${body[0].name}`;
      this.travelStaffId = body[0].id;
      this.prInfo = body[0];
      this.getDataList(body[0].id);
    },
    handleSubItem(v) {
      this.selectText = `${v.travelAgencyName} - ${v.name}`;
      this.openSelect = false;
      this.travelStaffId = v.id;
      this.prInfo = v;
      this.getDataList(v.id);
    },
    calendarConfirm(e) {
      this.dateText = `${e.range.before}-${e.range.after}`;
      this.defaultRange = [e.range.before, e.range.after];
      this.getDataList(this.travelStaffId);
    },
    async getDataList(travelStaffId) {
      uni.showLoading();
      const { body } = await staffOrderStatistics({
        travelStaffId,
        startTime: dayjs(this.defaultRange[0]).format("YYYYMMDD") + "000000",
        endTime: dayjs(this.defaultRange[1]).format("YYYYMMDD") + "235959",
      });
      this.dataList = [body];
      uni.hideLoading();
    },
  },
};
</script>

<style scoped lang="scss">
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 8px 0 rgba($color: #000000, $alpha: 0.15);
  .top-bar-box {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .top-bar-item {
    font-weight: normal;
    font-size: 26rpx;
    color: #333;
    display: flex;
    align-items: center;
    .icon {
      width: 20rpx;
      height: 20rpx;
      margin-left: 2rpx;
    }
  }
  .active-color {
    color: #5cc39d;
  }
  .select-box {
    background-color: rgba($color: #000000, $alpha: 0.1);
    .select-item {
      font-size: 26rpx;
      padding: 30rpx;
      border-bottom: 1px solid #e6e6e6;
      background-color: #fff;
    }
  }
}
.list-cnotent {
  padding-top: 100rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.app-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 0 8px 0 rgba($color: #000000, $alpha: 0.15);
  .card-title {
    font-size: 32rpx;
    color: #1a1a1a;
    font-weight: bold;
    padding-bottom: 12rpx;
    border-bottom: 1px solid #f2f2f2;
  }
  .card-item {
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14rpx;
    .label {
      color: #666;
    }
    .value {
      color: #333;
    }
  }
}
</style>
